<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/metro/easyui.css" rel="stylesheet" type="text/css">
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/icon.css" rel="stylesheet" type="text/css">
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/plugins/jquery.international.js" type="text/javascript"></script>
    <script src="/index/easyuiLanguagePack" type="text/javascript"></script>
    <script src="/index/languagePack/auth/menu" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.const.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.formatter.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.ajax.js" type="text/javascript"></script>
    <script type="text/javascript">

        // ================接口================S
        // 查询
        const menuBaseUrl = "/api/auth/menu"
        const searchUrl = menuBaseUrl + "/list";
        // 保存
        const insertUrl = menuBaseUrl + "/insert";
        const updateUrl = menuBaseUrl + "/update";
        // 删除数据
        const deleteUrl = menuBaseUrl + "/delete";
        // ================接口================E

        // ================组件================S
        // 数据表格ID
        const menuGridId = "menuGrid";
        // 数据表格查询表单ID
        const searchMenuFormId = "searchMenuForm";
        // 菜单信息表单ID
        const saveMenuFormId = "saveMenuForm";
        // 菜单信息编辑对话框ID
        const menuDialogId = "menuDialog";
        // ================组件================E

        // ================全局变量================S
        let menuCurrentRow;
        let menuSelectedRows;
        let saveUrl;
        // ================全局变量================E

        const buttons = [
            {
                iconCls: 'icon-search',
                handler: searchMenu,
                text: langCommon.search
            }, {
                iconCls: 'icon-cancel',
                handler: resetSearchMenuForm,
                text: langCommon.resetConditions
            }, {
                iconCls: 'icon-add',
                handler: openMenuAddDialog,
                text: langCommon.add
            }, {
                iconCls: 'icon-edit',
                handler: openMenuModifyDialog,
                text: langCommon.edit
            }, {
                iconCls: 'icon-remove',
                handler: deleteMenu,
                text: langCommon.delete
            }
        ];

        /**
         * 初始化菜单数据列表
         */
        function initMenuGrid() {
            let menuColumns = [[
                {field: 'sorting', title: lang.sorting, width: 30, align: 'left',sortable:true},
                {field: 'text', title: lang.name, width: 200, align: 'left'},
                {field: 'url', title: lang.url, width: 100, align: 'left'},
                {field: 'iconCls', title: lang.icon, width: 30, align: 'left',formatter:formatMenuIcon},
                {field: 'menuType', title: lang.menuType, width: 40, align: 'left',sortable:true,formatter: formatMenuType},
                // {field: 'status', title: lang.status, width: 40, align: 'left',sortable:true,formatter: formatStatus},
                {field: 'createTime', title: langCommon.createTime, width: 100, align: 'left', sortable:true, formatter: formatDateTime},
                {field: 'updateTime', title: langCommon.updateTime, width: 100, align: 'left', sortable:true, formatter: formatDateTime}
            ]];
            let params = {
            };
            initAndCallback(menuGridId, searchUrl, params, menuColumns, searchMenuCallback);
        }

        /**
         * 查询数据
         */
        function searchMenu() {
            let params = {

            };
            ajaxPostLoadWithFormAndCallback(searchMenuFormId, menuGridId, searchUrl, params, searchMenuCallback);
        }

        /**
         * 查询数据回调
         */
        function searchMenuCallback() {
            addButtons4pageTB(menuGridId, buttons);
        }

        /**
         * 删除数据
         */
        function deleteMenu() {
            menuSelectedRows = getSelections(menuGridId);
            if (menuSelectedRows.length == 0) {
                euAlert(langCommon.info, langCommon.message.selectDelDataMsg);
                return;
            }
            euConfirm(langCommon.info, langCommon.message.confirmDelMsg, deleteMenuCallback);
        }

        /**
         * 删除确认回调
         */
        function deleteMenuCallback() {
            let params = {menuId: menuCurrentRow.menuId};
            ajaxPostBodyAndCallback(deleteUrl, params, searchMenu);
        }

        /**
         * 打添加对话框
         */
        function openMenuAddDialog() {
            saveUrl = insertUrl;
            resetFrom(saveMenuFormId);
            openDialog(menuDialogId, langCommon.add);
        }

        /**
         * 打开编辑对话框
         */
        function openMenuModifyDialog() {
            saveUrl = updateUrl;
            openDialogAndFillInFormWithRowData(menuDialogId, saveMenuFormId, menuCurrentRow, langCommon.edit);
        }

        /**
         * 保存数据
         */
        function saveMenu() {
            let param = getFormData(saveMenuFormId);
            ajaxPostBodyAndCallback(saveUrl, param, saveMenuCallback);
        }

        /**
         * 保存回调
         */
        function saveMenuCallback() {
            searchMenu();
            closeMenuSetDialog();
        }

        /**
         * 关闭对话框
         */
        function closeMenuSetDialog() {
            closeDialog(menuDialogId);
        }

        /**
         * 重置搜索表单数据
         */
        function resetSearchMenuForm() {
            resetFrom(searchMenuFormId);
        }

        /**
         * 选中一行时触发
         * @param index
         * @param row
         */
        function onMenuSelectRow(index, row) {
            menuCurrentRow = row;
        }

        /**
         * 双击一行时触发
         * @param index
         * @param row
         */
        function onMenuDBClickRow(index, row) {
            menuCurrentRow = row;
            openMenuModifyDialog();
        }

        /**
         * 页面初始化
         */
        $(function () {

            token = getCookie(TOKEN_KEY);
            setText("searchTypeText", lang.menuType);
            setText("searchStatusText", langCommon.status);
            setText("searchParentMenuText", lang.parentMenu);
            setText("searchFirstMenuText", lang.firstMenu);
            setText("searchSecondMenuText", lang.secondMenu);
            setText("searchMenuTypeAllText", langCommon.all);
            setText("searchStatusActiveText", langCommon.active);
            setText("searchStatusLockedText", langCommon.locked);
            setText("searchStatusAllText", langCommon.all);

            setText("editFirstMenuText", lang.firstMenu);
            setText("editSecondMenuText", lang.secondMenu);
            setText("editMenuNameText", lang.name);
            setText("editSortingText", lang.sorting);
            setText("editTypeText", lang.menuType);
            setText("editPMenuText", lang.parentMenu);
            setText("editUrlText", lang.url);
            setText("editIconText", lang.icon);
            setEuButtonText("saveBtn", langCommon.confirm);
            setEuButtonText("closeBtn", langCommon.back);

            remoteLoadCombobox("search_p_id_comb", "/api/auth/menu/listCombobox", "menuId", "text",{menuType:"FIRST"});
            remoteLoadCombobox("edit_p_id_comb", "/api/auth/menu/listCombobox","menuId", "text",{menuType:"FIRST"});

            initMenuGrid();
            addKeyListener(13, searchMenu);
        });

    </script>
</head>

<body border="false" class="easyui-layout">
<div border="false" region="center" style="padding: 1px;">
    <form id="searchMenuForm" method="post">
        <table cellspacing="2px">
            <tr>
                <td><b id="searchParentMenuText"></b></td>
                <td>
                    <input class="easyui-combobox" id="search_p_id_comb" name="pmenuId" size="20"/>
                </td>
                <td style="width: 20px;"></td>
                <td><b id="searchTypeText"></b></td>
                <td>
                    <input type="radio" name="menuType" value="FIRST">
                    <span id="searchFirstMenuText"></span>
                    <input type="radio" name="menuType" value="SECOND" >
                    <span id="searchSecondMenuText"></span>
                    <input type="radio" name="menuType" value="" checked="checked">
                    <span id="searchMenuTypeAllText"></span>
                </td>
                <td style="width: 20px;"></td>
<!--                <td><b id="searchStatusText"></b></td>-->
<!--                <td>-->
<!--                    <input type="radio" name="status" value="ACTIVE">-->
<!--                    <span id="searchStatusActiveText"></span>-->
<!--                    <input type="radio" name="status" value="LOCKED">-->
<!--                    <span id="searchStatusLockedText"></span>-->
<!--                    <input type="radio" name="status" value="" checked="checked">-->
<!--                    <span id="searchStatusAllText"></span>-->
<!--                </td>-->
            </tr>

        </table>
    </form>
    <table class="easyui-datagrid" data-options="
        multiSort:true,
        pagePosition: 'top',
        fitColumns:true,
        pagination:true,
        singleSelect:true,
        fit:true,
        toolbar:'#searchMenuForm',
        pageSize:40,
        onSelect:onMenuSelectRow,
        onDblClickRow:onMenuDBClickRow" id="menuGrid">

    </table>
    <div buttons="#dlg-buttons" class="easyui-dialog" data-options="iconCls:'icon-edit',modal:true,closed:true"
         id="menuDialog">
        <form id="saveMenuForm" method="post">
            <table cellspacing="2px">
                <input hidden="true" name="menuId"/>
                <tr>
                    <td id="editMenuNameText" style="width: 100px;"></td>
                    <td><input class="easyui-textbox" name="text" required="true" size="60" multiline="true" style="height: 60px"/></td>
                </tr>
                <tr>
                    <td id="editUrlText"></td>
                    <td><input class="easyui-textbox" name="url" size="60"/></td>
                </tr>
                <tr>
                    <td id="editIconText"></td>
                    <td><input class="easyui-textbox" name="iconCls" size="60"/></td>
                </tr>
                <tr>
                    <td id="editTypeText"></td>
                    <td>
                        <span id="editFirstMenuText"></span>
                        <input type="radio" name="menuType" value="FIRST">
                        <span id="editSecondMenuText"></span>
                        <input type="radio" name="menuType" value="SECOND" checked="checked">
                    </td>
                </tr>
                <tr>
                    <td id="editPMenuText"></td>
                    <td>
                        <input class="easyui-combobox" id="edit_p_id_comb" data-options="required:true" name="pmenuId" size="60"/>
                    </td>
                </tr>
                <tr>
                    <td id="editSortingText"></td>
                    <td><input class="easyui-numberspinner" name="sorting" required="true" value="0" size="60"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="dlg-buttons">
        <a class="easyui-linkbutton" href="javascript:saveMenu()" iconCls="icon-ok" id="saveBtn"></a>
        <a class="easyui-linkbutton" href="javascript:closeMenuSetDialog()" iconCls="icon-no" id="closeBtn"></a>
    </div>
</div>
</body>
</html>